<template>
	<div>
		<el-dialog title="充值vip" :before-close="cancelAdd" :visible.sync="dialogFormVisible" width="500px">
			<el-form :model="form" label-width="100px" class="demo-ruleForm" :rules="rules" ref="ruleForm">
				<el-form-item label="名称">
					{{form.nickname}}
				</el-form-item>
				<el-form-item label="套餐" prop='name'>
					<el-select v-model="form.name" placeholder="请选择">
						<el-option v-for="item in options" :key="item.id" :label="item.name+'（'+item.state+'）'"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false,form.name=''">取 消</el-button>
				<el-button type="primary" @click="submitInfo()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		allVipPackage,
		vipRecharge
	} from "@/api/vippackage";
	export default {
		data() {
			return {
				shanghuuserid: 0,
				dialogFormVisible: false,
				options: [],
				form: {
					name: '',
					nickname: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请选择套餐',
						trigger: 'blur'
					}]
				}
			}
		},
		mounted() {
			this.getPackage()
		},
		methods: {
			cancelAdd() {
				this.dialogFormVisible = false
				this.form = {
					name: '',
					nickname: ''
				}
			},
			initData(info) {
				this.dialogFormVisible = true
				this.shanghuuserid = info.id
				this.form.nickname = info.name
			},
			submitInfo() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						vipRecharge({
							"shanghuuserid": this.shanghuuserid,
							"vippackageid": this.form.name
						}).then(res => {
							this.$message.success('充值成功')
							this.dialogFormVisible = false
							this.$emit('refresh', true)
							this.form = {
								name: '',
								nickname: ''
							}
						})
					} else {
						return false;
					}
				});
			},
			getPackage() {
				allVipPackage().then(res => {
					res.data.forEach(resp => {
						resp.state = this.statefilter(resp.state)
					})
					this.options = res.data
				})
			},
			statefilter(val) {
				if (val == 1) {
					return "基础产品";
				} else if (val == 2) {
					return "收款";
				} else if (val == 3) {
					return "优惠卷";
				} else if (val == 4) {
					return "充值购";
				} else if (val == 5) {
					return "单品快卖";
				} else if (val == 6) {
					return "商城";
				} else if (val == 7) {
					return "会员系统";
				} else if (val == 8) {
					return "股东";
				} else if (val == 9) {
					return "套餐";
				}
			},
		}
	}
</script>

<style>
</style>
